<script>
// 工作区操作主体部分
import GridLayouts from './GridLayouts';
import WorkSpaceQuery from '../../mixins/WorkspaceQuery';

import * as types from '../../store/types';
import * as utils from '../../utils/helps';

export default {
  name: 'WorkSpaceContent',
  components: {
    GridLayouts,
  },
  mixins: [WorkSpaceQuery],
  data() {
    return {
      canvasColor: '#F5F7F9',
      isEdit: false,
      appName: '',
    };
  },
  computed: {
    layoutList() {
      const layout = utils.setAllControlToArr(this.$store.getters.controls);
      const layoutCopy = utils.setPositionToOut(layout);
      return layoutCopy;
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.appName = this.$store.state.app.appData.name;
      this.id = this.$store.state.app.appData.id;
    });
  },
  methods: {
    contentStyle() {
      return { margin: '20px', background: this.canvasColor, minHeight: '260px' };
    },
    /* 改变面板背景色 */
    changeContentColor(e) {
      this.canvasColor = e;
    },
    // 修改应用名称
    editAppName() {
      this.isEdit = !this.isEdit;
      if (!this.isEdit && this.id) {
        this.isUpDataApp(this.appName);
      }
    },
    // 通知新建一个组件
    noticeAddNewChart(type) {
      this.$emit('open-newchart', type);
    },
  },
};
</script>

<template>
  <Layout>
    <Header>
      <Row>
        <Col span="14">
        <span v-if="!isEdit">{{ appName }}</span>
        <Input
          v-else
          v-model="appName"
        ></Input>
        <Icon
          :type="!isEdit?'edit':'checkmark-round'"
          size="15"
          @click.native="editAppName"/>
        </Col>
        <Col span="1"></Col>
        <Col span="3">
        <span>背景色</span>
        <ColorPicker
          v-model="canvasColor"
          recommend
          @on-active-change="changeContentColor"/>
        </Col>
        <Col span="3">
        <Row>
          <span>主题</span>
          <div class="theme">
            <a class="default">
              <span/>
            </a>
            <a class="light">
              <span/>
            </a>
            <a class="dark">
              <span/>
            </a>
          </div>
        </Row>
        </Col>
        <Col span="3">
        <span>布局</span>
        <div class="layout-module">
          <a>
            <SvgIcon
              icon-class="layout-icon-one"
              size="25"/>
          </a>
          <a>
            <span>
              <SvgIcon
                icon-class="layout-icon-two"
                size="25"/>
            </span>
          </a>
          <a>
            <span>
              <SvgIcon
                icon-class="layout-icon-three"
                size="25"/>
            </span>
          </a>
        </div>
        </Col>
      </Row>
    </Header>
    <Content :style="contentStyle">
      <GridLayouts
        :layout-list="layoutList"
        is-show-tools
        @open-newchart="noticeAddNewChart('add')"
      />
    </Content>
  </Layout>
</template>

<style lang="less" scoped>
.k-layout-header {
  position: fixed;
  width: 100%;
  padding: 0 30px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  height: 40px;
  line-height: 40px;
  z-index: 1;

  .k-row .k-col:first-child {
    font-size: 18px;

    .k-icon {
      cursor: pointer;
    }

    .k-input-wrapper {
      width: 200px;
      border: none;
    }
  }

  .k-row {
    :last-child,
    :first-child {
      display: inline-block;
    }
  }
}

.k-layout-content {
  margin: 40px 0 20px 0;
}

.theme {
  display: inline-block;
  border-radius: 4px;
  vertical-align: middle;
  height: 32px;

  a {
    height: 40px;
    cursor: pointer;
    margin-top: 2px;
    span {
      border: 1px solid #e3e3e3;
      width: 30px;
      height: 27px;
      display: inline-block;
      background: #37a2da;
    }

    span:hover {
      border: 2px solid #37a2da;
    }
  }

  .default {
    span {
      margin-left: 1px;
      background: linear-gradient(
        to right,
        #459aee 0px,
        #459aee 10px,
        #ec5f6d 10px,
        #ec5f6d 20px,
        #fdc54d 20px,
        #fdc54d 30px
      );
    }
  }

  .light {
    span {
      background: linear-gradient(
        to right,
        #38f1cc 0px,
        #38f1cc 10px,
        #58b2ff 10px,
        #58b2ff 20px,
        #9a7cfe 20px,
        #9a7cfe 30px
      );
    }
  }

  .dark {
    span {
      background: linear-gradient(
        to right,
        #40505f 0px,
        #40505f 10px,
        #d2294d 10px,
        #d2294d 20px,
        #3c7dbe 20px,
        #3c7dbe 30px
      );
    }
  }
}

.layout-module {
  display: inline-block;
  border-radius: 4px;
  vertical-align: middle;
  height: 32px;

  .svgactive a:hover /deep/ .k-svgicon > svg {
    fill: #2d8cf0 !important;
  }

  a {
    cursor: pointer;
    vertical-align: middle;
  }
}
</style>
